<template>
  <div class="card art-custom-card">
<!--  <ArtBarChart
      class="chart"
      barWidth="50%"
      height="13.7rem"
      :showAxisLine="false"
      :data="[160, 100, 150, 80, 190, 100, 175, 120, 160]"
      :xAxisData="['1', '2', '3', '4', '5', '6', '7', '8', '9']"
    />
   <div class="text">
     <h3 class="box-title">用户概述</h3>
      <p class="subtitle">比上周 <span class="text-success">+23%</span></p>
      <p class="subtitle">我们为您创建了多个选项，可将它们组合在一起并定制为像素完美的页面</p>
	  
    </div>
    <div class="list">
		
     <div v-for="(item, index) in list" :key="index">
        <p>{{ item.num }}</p>
        <p class="subtitle">{{ item.name }}</p>
	
      </div>

    </div> -->
	
	
<!-- 	  <el-calendar v-model="value" /> -->



 <el-calendar  v-model="currentDate"
      :range="calendarRange"
      ref="calendar">
    <template #header="{ date }">

      <el-button-group style="margin-left: auto;margin-right: 0;">
	
 <el-select v-model="selectedYear" @change="handleMonthChange" placeholder="年份" style="width: 7rem ">
    <el-option
      v-for="year in yearOptions"
               :key="year"
               :label="`${year}年`"
               :value="year"
    />
  </el-select>
  
 <el-select  v-model="selectedMonth" @change="handleMonthChange"placeholder="月份" style="width: 6rem; margin-left: 1rem;">
    <el-option
      v-for="month in 12"
               :key="month"
               :label="`${month}月`"
               :value="month"
    />
  </el-select>



      </el-button-group>
    </template>
  </el-calendar>







	
<div style="margin-top: -1rem; ">
	
	<div style="position: relative; left: 0px; top: 0px; margin-top: 10px;">
	<span  style="color: rgb(153, 153, 153); text-align: left;">温馨提示：</span>
	</div>
	
	 <div>
		 <span style="width: 100%; margin-top: 0px; color: rgb(153, 153, 153);"> 1.按公司规定，打卡时间以</span>
			  <span style="margin-top: 0px; color: rgb(22, 161, 236);">秒</span> 
			  <span style="width: 100%; margin-top: 0px; color: rgb(153, 153, 153);">作为单位，如上班</span>
			   <span  size="small" style="width: 100%; margin-top: 0px; color: rgb(153, 153, 153);">时间为</span>
			   <span style="margin-top: 0px; color: rgb(22, 161, 236);">09:00:00，</span> 
			   <span style="width: 100%; margin-top: 0px; color: rgb(153, 153, 153);">打卡时间超过</span>
				<span style="margin-top: 0px; color: rgb(22, 161, 236);">09:00:00，</span>
				 <span style="width: 100%; margin-top: 0px; color: rgb(153, 153, 153);">则视</span>
				  <span  style="width: 100%; margin-top: 0px; color: rgb(153, 153, 153);">为迟到。</span>
				 </div>
				 
				   <div  style="text-align: left;">
					   <span  style="width: 100%; margin-top: 0px; color: rgb(153, 153, 153);">2.如您忘记打卡或打卡失败，请在3个工作日内</span>
					<span  style="width: 100%; margin-top: 0px; color: rgb(153, 153, 153); text-align: left;">处理异常考勤。</span>
				  </div>
				  
				  </div>
				  
				  
				  
				  
  </div>


  
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const currentDate = ref(new Date());
const selectedYear = ref(new Date().getFullYear());
const selectedMonth = ref(new Date().getMonth() + 1);
 
// 生成年份选项（前后10年）
const yearOptions = computed(() => {
  const currentYear = new Date().getFullYear();
  return Array.from({ length: 21 }, (_, i) => currentYear - 10 + i);
});
 
// 处理年份变化
const handleYearChange = (year:number) => {
  currentDate.value = new Date(year, selectedMonth.value - 1, 1);
};
 
// 处理月份变化
const handleMonthChange = (month:number) => {
  currentDate.value = new Date(selectedYear.value, month - 1, 1);
};
 
// 计算日历显示范围
const calendarRange = computed(() => {
  return [
    new Date(selectedYear.value, selectedMonth.value - 1, 1),
    new Date(selectedYear.value, selectedMonth.value, 0)
  ];
});



</script>

<style lang="scss" scoped>
  .card {
    box-sizing: border-box;
    width: 100%;
	 height: 50rem;
    // height: 680px;
    padding: 16px;

    .chart {
      box-sizing: border-box;
      width: 100%;
      height: 220px;
      padding: 10px;
      border-radius: calc(var(--custom-radius) / 2 + 4px) !important;
    }

    .text {
      margin-left: 3px;

      h3 {
        margin-top: 20px;
        font-size: 18px;
        font-weight: 500;
      }

      p {
        margin-top: 5px;
        font-size: 14px;

        &:last-of-type {
          height: 42px;
          margin-top: 5px;
        }
      }
    }

    .list {
      display: flex;
      justify-content: space-between;
      margin-left: 3px;

      > div {
        flex: 1;

        p {
          font-weight: 400;

          &:first-of-type {
            font-size: 24px;
            color: var(--art-gray-900);
          }

          &:last-of-type {
            font-size: 13px;
          }
        }
      }
    }
  }

  .dark {
    .card {
      .chart {
        background: none;
      }
    }
  }

  @media screen and (max-width: $device-phone) {
    .dark {
      .card {
        .chart {
          padding: 15px 0 0 !important;
        }
      }
    }
  }
</style>
